<template>
    <view class="feedback">
        <view class="feedback-top">
            <view class="top-left">反馈内容</view>
            <view class="top-right">{{content.length}}/300</view>
        </view>
        <view class="zhang">
					<textarea name="" id="" cols="30" v-model="content" maxlength="300" rows="10" placeholder="你的反馈将帮助我们更快的成长" class="inputtext"></textarea>
					<view class="flex flex-wrap mt26">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image class="uploadimg-preview" :src="item.file_path" mode="aspectFill"></image>
							<view class="iconfont icon-shanchu" @tap.stop="DelImg" :data-index="index"></view>
						</view>
						<view class="picture" @click="ChooseImage" v-if="imgList.length<9">
								<image src="@/static/user/picture@2x.png" class="imgs"></image>
								<view class="text">
										图片/视频
								</view>
						</view>
					</view>
        </view>
        <view class="titel">
            联系方式
        </view>
        <!-- qq -->
        <view class="qq">
            <view class="qq-item">
                <view class="qq-left">
                    手机号
                </view>
                <view class="qq-right">
                    <input type="text" placeholder="必填" v-model="phone" />
                </view>
            </view>
        </view>
        <view class="fkwt" hover-class="itemActive" @click="handleSubmit">
            <view class="fkwt-img" >
                <!-- <image src="../../static/awal6@2x.png" mode=""></image> -->
                <view class="imgs">
                    
                </view>
                <view class="text">
                    提交
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import * as userApi from '@/api/user'
	import config from '@/config.js'
	export default {
		data() {
			return {
				phone: '',
				content: '',
				imgList: [],
				image:""
			}
		},
		methods: {
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ChooseImage() {
				let token = uni.getStorageSync("AccessToken")
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let a = JSON.stringify(res.tempFilePaths)
						let images = res.tempFilePaths
						const tempFilePaths = res.tempFilePaths;
						this.image = tempFilePaths[0];  //能够打印出选中的图片
						
						//点击后图片更改状态由0变成1
						uni.showLoading({
							title: '上传中'
						})
						let promiseList = []
						images.forEach((item, index) => {
							promiseList.push(new Promise((resolve, reject) => {
								const url = config.apiUrl + config.uploadUrl;
								uni.uploadFile({
									url, 
									filePath: item,
									// #ifndef MP-ALIPAY
									name: 'iFile',
									// #endif
									// #ifdef MP-ALIPAY
									fileName:"iFile",
									fileType:"image",
									// #endif
									formData: {
										wxapp_id: this.$wxapp_id,
										token:  token,
									},
									success: (res) => {
										resolve(res)
									},
									fail: (e) => {
										reject(e)
									}
								});
							}))
						})
						let uploadImages = []
						Promise.all(promiseList).then(res => {

							uni.hideLoading()
							let data = res
							data.forEach(item => {
								uploadImages.push(JSON.parse(item.data).data)
							})
							
							this.imgList = this.imgList.concat(uploadImages)

						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '是否确定删除这张图片？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			handleSubmit() {
				if(this.$fxLink.checkPhone(this.phone)){
					return this.$toast("请输入正确格式手机号")
				}
				if(!this.content.length > 0) {
					return this.$toast('请填写问题描述')
				}
				let file_id = this.imgList.map(item => {
					return item.file_id
				})
				let token = uni.getStorageSync("AccessToken")
				userApi.submitFeedback({
					phone: this.phone,
					content: this.content,
					images:file_id?file_id:"",
					wxapp_id: this.$wxapp_id,
					token:  token,
				}).then(res => {
					if(res.code == 0){
						this.$toast(res.msg)
					}else{
						this.$toast('提交意见反馈成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
					

				})
			}
		}
	}
</script>

<style lang="scss">
    .itemActive{
        .imgs{
              transform:scale(1.1)
        }
    }
    .feedback{
        height: calc(100vh );
        background-color: #F2F7FA;
        padding: 0 32rpx;
        .feedback-top{
             padding-top: 40rpx;
            display: flex;
            .top-left{
                margin-right: 10rpx;
                width: 120rpx;
                height: 42rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 30rpx;
                color: #333333;
                line-height: 38rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .top-right{
                height: 42rpx;
                font-family: SF UI Text, SF UI Text;
                font-weight: 300;
                font-size: 26rpx;
                color: #333333;
                line-height: 42rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
   .zhang{
       margin-top: 16rpx;
       margin-bottom: 48rpx;
       position: relative;
       padding: 24rpx;
       box-sizing: border-box;
       // height: 308rpx;
			 min-height: 308rpx;
       background: #FCFDFD;
       box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
       border-radius: 0rpx 0rpx 0rpx 0rpx;
       border: 4rpx solid #FFFFFF;
       .inputtext{
           width: 100%;
					 max-height: 200rpx;
       }
       .picture{
           // position: absolute;
           left: 24rpx;
           bottom: 24rpx;
           width: 120rpx;
           height: 120rpx;
           background: #F5F8FA;
           border-radius: 16rpx 16rpx 16rpx 16rpx;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           // flex-wrap: wrap;
           .imgs{
                 transition:  0.2s linear;
               width: 40rpx;
               height: 40rpx;
               margin-bottom: 8rpx;
               // background: url('/static/picture@2x.png') no-repeat;
               // background-size: 40rpx 40rpx;
           }
           .text{
               width: 90rpx;
               height: 28rpx;
               font-family: PingFang SC, PingFang SC;
               font-weight: 300;
               font-size: 20rpx;
               color: #333333;
               line-height: 23rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
       }
   }
   .titel{
       height: 42rpx;
       font-family: PingFang SC, PingFang SC;
       font-weight: 600;
       font-size: 30rpx;
       color: #333333;
       line-height: 35rpx;
       text-align: left;
       font-style: normal;
       text-transform: none;
   }
   .qq{
       margin-top: 16rpx;
       margin-bottom: 80rpx;
       height: 172rpx;
       background: #FCFDFD;
       box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
       border-radius: 0rpx 0rpx 0rpx 0rpx;
       border: 4rpx solid #FFFFFF;
       .qq-item{
           padding: 24rpx;
           display: flex;
           justify-content: space-between;
           .qq-left{
               height: 42rpx;
               font-family: PingFang SC, PingFang SC;
               font-weight: 300;
               font-size: 30rpx;
               color: #333333;
               line-height: 42rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
           .qq-right{
               width: 60%;
                font-size: 30rpx;
                text-align: right;
           }
       }
   }
   .fkwt{
       .fkwt-img{
           position: relative;
           display: flex;
           justify-content: center;
          .imgs{
               transition:  0.2s linear;
              position: absolute;
              width: 362rpx;
              height: 76rpx;
              background: url('../../static/awal6@2x.png') no-repeat;
              background-size: 362rpx 76rpx; 
          }
          .text{
               position: relative;
              width: 362rpx;
              height: 76rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 600;
              font-size: 30rpx;
              color: #FFFFFF;
              line-height: 76rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
          }
       }
   }
   .wdfk{
       margin-top: 32rpx;
       width: 100%;
       height: 36rpx;
       font-family: PingFang SC, PingFang SC;
       font-weight: 400;
       font-size: 26rpx;
       color: #626566;
       line-height: 30rpx;
       text-align: center;
       font-style: normal;
       text-transform: none;
   }
    
    }
		
	.uploadimg-preview{
		width: 120rpx;
		height: 120rpx;
	}
	.bg-img{
		margin-right: 16rpx;
	}
</style>